<template>
  <div class="image">
    <div class="wechat-box">
      <span class="fa fa-weixin icon" aria-hidden="true"></span>
      <span class="num">{{ playCount | count }}</span>
    </div>
    <div class="image-box">
      <img :src="picUrl" alt="" />
    </div>
    <div class="text-box">
      <p>{{ name }}</p>
    </div>
  </div>
</template>

<script>
export default {
  name: "compImage",
  props: {
    name: {
      type: String,
      default: "",
    },
    playCount: {
      type: Number,
    },
    picUrl: {
      type: String,
    },
  },
  filters: {
    count(v) {
      if (v) {
        v = v - 0;
      }
      return v / 1000 + "万";
    },
  },
};
</script>

<style lang="less" scoped>
.image {
  width: 100%;
  position: relative;
}
.wechat-box {
  position: absolute;
  right: 0;
  top: 0;
  color: #fff;
  font-size: 0;
  .icon,
  .num {
    font-size: 12px;
    margin-right: 5px;
  }
}
.image-box {
  img {
    width: 100%;
  }
}
.text-box p {
  font-size: 14px;
  color: #333;
  padding: 4px 0 4px 6px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
</style>